<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <TodoHeader @add="addFn"></TodoHeader>

    <!-- 主体部分 -->
    <TodoMain :list="showList" @del="delFn" @change="changeFn" @checkAll="checkAllFn"></TodoMain>

    <!-- 底部部分 -->
    <TodoFooter :list="list" :type="type" @changeType="changeType" @clear="clearFn"></TodoFooter>
  </section>
</template>

<script>
// 1. 渲染列表
// (1) 在App.vue中准备数据
// (2) 通过父传子给TodoMain.vue传递数据
// (3) 在TodoMain.vue 利用v-for遍历
// 2. 删除功能
// (1) 在Main.vue中添加点击事件 传递id
// (2) 子传父,把id传递给App.vue
// (3) 在App.vue中根据id在list中删除掉这一项
// 3. 任务状态修改
// (1) 把v-model改成 :checked
// (2) 给checkbox注册change事件 ,子传父把id传回去
// (3) 在父组件中修改状态
// 4.任务的添加功能
// (1) 在Header.vue中通过v-model获取任务名字
// (2) 回车的时候子传父, 把名字传递给父组件
// (3) 在父组件中给list数组中添加一项
// (4) 输入框清空
// 5.剩余任务数的统计
// (1) 数组list 穿个Footer.vue
// (2) 定义一个计算属性 用于显示未完成任务数
// (3) list没有数据隐藏footer.vue
// 6. 清空功能
// (1) 清空按钮的显示隐藏
// (2) 通过绑定点击事件 子传父
// (3) 在父组件里改数据
// 7.底部筛选功能-高亮
// (1) 添加点击事件,修改type
// (2) 动态绑定class渲染selected类名
// 8. 切换type的时候 list渲染发生变化
// (1) 通过把type提升到父组件中
// (2) 利用计算属性筛选list实现渲染不同的数据
// 9. 本地持久化
// (1) 监听list数据的变化
// (2) 只要有变化,将list存到本地存储中
// (3) 刷新页面时,从本地拿数据给list赋值
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  data() {
    return {
      list: JSON.parse(localStorage.getItem('todoList')) || [
        { id: 1, name: '吃饭', isDone: true },
        { id: 2, name: '睡觉', isDone: false },
        { id: 3, name: '打豆豆', isDone: true }
      ],
      type: 'all'
    }
  },
  computed: {
    showList() {
      if (this.type === 'completed') {
        return this.list.filter(item => item.isDone === true)
      } else if (this.type === 'active') {
        return this.list.filter(item => item.isDone === false)
      } else {
        return this.list
      }
    }
  },
  methods: {
    delFn(id) {
      console.log(id);
      // 利用filter删除这个id项 留下的是item.id跟传入的id不同的项
      this.list = this.list.filter(item => item.id !== id)
    },
    changeFn(id) {
      // 利用数组find方法找到想要修改的那一项
      const curItem = this.list.find(item => item.id === id)
      curItem.isDone = !curItem.isDone
    },
    addFn(name) {
      // list数组前面加一项
      this.list.unshift({
        id: Date.now(),
        name,
        isDone: false
      })
    },
    clearFn() {
      // 清空已完成的
      this.list = this.list.filter(item => item.isDone === false)
    },
    changeType(type) {
      this.type = type
    },
    checkAllFn(value) {
      console.log(value);
      this.list.forEach(item => (item.isDone = value))
    }
  },
  watch: {
    list: {
      deep: true,
      handler(newValue) {
        // 将list存到localStorage中
        localStorage.setItem('todoList', JSON.stringify(newValue))
      }
    }
  }
}
</script>

<style></style>
